<template>
  <div>
    <div style="margin-bottom: 20px; text-align: right">
      <el-button type="primary" v-if="workflowState == 1" @click="addSubmit('applicationInfo')">提交</el-button>
      <el-button type="primary" v-if="workflowState == 2 && fromDaiban == 1" @click="disagree">驳回</el-button>
      <el-button type="primary" v-if="workflowState == 2 && fromDaiban == 1" @click="agree">同意</el-button>
    </div>
    <el-form label-position="right" :model="applicationInfo" ref="applicationInfo" :rules="rules">
      <div style="text-align: left">
        <el-form-item label="申请单标题" label-width="100px" prop="item">
          <el-input v-if="isEditing == true" v-model="applicationInfo.item" placeholder="请输入申请单标题"></el-input>
          <span v-else>{{applicationInfo.item}}</span>
        </el-form-item>
        <el-form-item label="流程序号" label-width="100px">{{applicationInfo.workflow_id}}</el-form-item>
        <el-form-item label="申请单号" label-width="100px">{{applicationInfo.applicationNumber}}</el-form-item>
        <el-form-item label="处理意见" label-width="100px" v-if=" workflowState == 2 ">
          <el-input type="textarea" v-model="comment" placeholder="请输入处理意见"></el-input>
        </el-form-item>
      </div>
      <div style="text-align: right">
        <el-button
          type="primary"
          v-if="workflowState == 1"
          @click="addRow(applicationInfo.companyInfo)"
        >新增</el-button>
      </div>
      <div>
        <el-table align="center" :data="applicationInfo.companyInfo" ref="companyInfo">
          <el-table-column prop="id" label="公司编码">
            <template slot-scope="scope">
              <el-form-item
                v-if="isEditing"
                :prop="'companyInfo.'+scope.$index+'.id'"
                :rules="rules.id"
              >
                <el-input v-model="scope.row.id"></el-input>
              </el-form-item>
              <span v-else>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="公司名称">
            <template slot-scope="scope">
              <el-form-item
                v-if="isEditing"
                :prop="'companyInfo.'+scope.$index+'.name'"
                :rules="rules.name"
              >
                <el-input v-model="scope.row.name"></el-input>
              </el-form-item>
              <span v-else>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="公司地址">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" v-if="isEditing"></el-input>
              <span v-else>{{scope.row.address}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="tel" label="联系电话">
            <template slot-scope="scope">
              <el-input v-model="scope.row.tel" v-if="isEditing"></el-input>
              <span v-else>{{scope.row.tel}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sbu" label="所属事业部">
            <template slot-scope="scope">
              <el-select
                v-if="isEditing"
                v-model="scope.row.sbu"
                filterable
                remote
                placeholder="请输入事业部名称"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option
                  v-for="item in sbuFilterList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <span v-else v-html="sbuFormatter(scope,scope.row.sbu)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="role" label="所属类别">
            <template slot-scope="scope">
              <el-select
                v-if="isEditing"
                v-model="scope.row.role"
                filterable
                remote
                placeholder="请输入名称，如服务商"
                :remote-method="remoteMethodRole"
                :loading="loading"
              >
                <el-option
                  v-for="item in roleFilterList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <span v-else v-html="roleFormatter(scope,scope.row.role)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作类型">
            <template slot-scope="scope">
              <el-form-item
                :prop="'companyInfo.'+scope.$index+'.operation'"
                :rules="rules.operation"
              >
                <el-radio :disabled="!isEditing" v-model="scope.row.operation" :label="0">删除</el-radio>
                <el-radio :disabled="!isEditing" v-model="scope.row.operation" :label="1">新增</el-radio>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" v-if="workflowState == 1">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click.native.prevent="deleteRow(scope.$index,applicationInfo.companyInfo)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <div>
      <el-table
        align="center"
        :data="workflowHistory"
        ref="workflowHistory"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column label="时间" prop="date" sortable width="180"></el-table-column>
        <el-table-column label="流程状态" prop="state" width="180"></el-table-column>
        <el-table-column label="流程操作" prop="action" width="180"></el-table-column>
        <el-table-column label="流程内容" prop="description" width="180"></el-table-column>
        <el-table-column label="流程处理人" prop="user" width="180"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEditing: true,
      fromDaiban: "0",
      workflowState: "1",
      applicationInfo: {
        item: "",
        workflow_id: "",
        applicationNumber: "",
        companyInfo: []
      },
      comment: "",
      workflowHistory: [],
      //下面select远程搜索所用数据
      sbuFilterList: [],
      list: [],
      loading: false,
      rolelist: [],
      roleFilterList: [],
      rules: {
        id: [{ required: true, message: "请输入公司MDM编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        item: [{ required: true, message: "请填写标题", trigger: "blur" }],
        operation: [{ required: true, message: "选择操作", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getSbuId();
  },
  created() {
    if (this.$route.params.fromOther == 1) {
      this.applicationInfo.workflow_id = this.$route.params.workflowId;
      this.applicationInfo.applicationNumber = this.$route.params.number;
      this.applicationInfo.item = this.$route.params.item;
      this.fromDaiban = this.$route.params.fromDaiban;
      this.getApplicationInfos();
      this.roleFilterList = this.$store.getters.roleList;
      this.sbuFilterList = this.$store.getters.sbuList;
    }
  },
  methods: {
    addRow(tableData) {
      tableData.push({
        id: "",
        name: "",
        address: "",
        tel: "",
        sbu: "",
        role: "",
        operation: ""
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    addSubmit(refName) {
      this.$refs[refName].validate(valid => {
        if (valid) {
          this.axios
            .post("/input_company_info", JSON.stringify(this.applicationInfo))
            .then(response => {
              if (response.data.haserror == 1) {
                return this.$alert(
                  response.data.errorinfo,
                  "公司注册信息错误",
                  {
                    confirmButtonText: "确定",
                    callback: () => {
                      this.$message({
                        type: "info",
                        message: "公司注册信息错误"
                      });
                    }
                  }
                );
              }
              if (response.data.success === 1) {
                this.$message({
                  message: "提交成功",
                  type: "success"
                });
                this.$router.push({ name: "myworkflow" });
              } else {
                this.$message({
                  message: "流程提交失败",
                  type: "warning"
                });
              }
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          console.log("提交失败，验证错误！");
          return false;
        }
      });
    },
    getApplicationInfos() {
      this.axios
        .get("/getappinfos", {
          params: {
            workflowId: this.applicationInfo.workflow_id,
            workflowType: "CompanyInfo",
            applicationNumber: this.applicationInfo.applicationNumber
          }
        })
        .then(response => {
          this.applicationInfo.companyInfo = response.data.companyinfos;
          this.workflowHistory = response.data.history;
          this.workflowState = response.data.state;
          this.isEditing = response.data.isEditing;
        })
        .catch(error => {
          console.log(error);
        });
    },
    disagree() {
      this.axios
        .get("/disagree_companyinfo", {
          params: {
            comment: this.comment,
            workflow_id: this.applicationInfo.workflow_id
          }
        })
        .then(response => {
          if (response.data.success == 1) {
            this.$message({
              message: "审批成功",
              type: "success"
            });
            this.$router.push({ name: "daiban" });
          } else {
            this.$message({
              message: "审批失败",
              type: "warn"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    agree() {
      this.axios
        .get("/agree_companyinfo", {
          params: {
            workflow_id: this.applicationInfo.workflow_id
          }
        })
        .then(response => {
          if (response.data.success == 1) {
            this.$message({
              message: "审批成功",
              type: "success"
            });
            this.$router.push({ name: "daiban" });
          } else {
            this.$message({
              message: "审批失败",
              type: "warn"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getSbuId() {
      this.axios
        .get("/get_id_values")
        .then(response => {
          this.list = response.data.sbuid.map(item => {
            return { id: item.id, name: item.name };
          });
          this.rolelist = response.data.userrole.map(item => {
            return { id: item.id, name: item.name };
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.sbuFilterList = this.list.filter(item => {
            return item.name.indexOf(query) > -1;
          });
        }, 200);
      } else {
        this.sbuFilterList = [];
      }
    },
    remoteMethodRole(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.roleFilterList = this.rolelist.filter(item => {
            return item.name.indexOf(query) > -1;
          });
        }, 200);
      } else {
        this.roleFilterList = [];
      }
    },
    sbuFormatter(scope, value) {
      return this.sbuFilterList.find(element => element.id == value).name;
    },
    roleFormatter(scope, value) {
      return this.roleFilterList.find(element => element.id == value).name;
    }
  }
};
</script>
